<template>
	<view class="draw-page">
		<image class="home-bj" :src="imgurl+'/WeChat/pic12.png'" mode="widthFix"></image>
		<view class="xydzp flex-between">
			<view @click="savedrawtype(1)" :class="'xydzp-btn' + (drawtypes==1?' xydzpon':'')">
				每日抽奖
			</view>
			<view @click="savedrawtype(2)" :class="'xydzp-btn' + (drawtypes==2?' xydzpon':'')">
				最终大奖
			</view>
		</view>
		<!-- 	<view class="xydzp">
			<image :src="imgurl+'/WeChat/xydzp.png'" mode=""></image>
		</view> -->
		<!-- 终极大奖 -->
		<!-- 	<view class="xydzp" v-if="drawtype==2">
			<image :src="imgurl+'/WeChat/xydzp1.png'" mode=""></image>
		</view> -->
		<view class="draw-number">
			可抽奖次数{{prize_num}}
		</view>
		<view style="width: 679rpx;height: 670rpx;margin: 0px auto;background: #00412d;border-radius: 20rpx;">

			<gb-choujiang :nImg='nImg' :AwardList="AwardList" :isdrawing="isdrawing" :drawtype='drawtypes'
				@updateMoney="updateMoney" @isDraw="isDraw" @noDraw="noDraw"></gb-choujiang>
		</view>
		<div class="winning-box">
			<swiper class="swiper flex-grow-1" circular autoplay="true" interval="3000" vertical="true">
				<swiper-item v-for="item in stepList" :key="item.id">
					<view class="swiper-item">
						<view class="userimg flex-grow-0">
							<image :src="imgurl+item.avatar" mode=""></image>
						</view>
						<view class="name flex-grow-0" style="font-size: 28rpx;">
							{{item.username}}
						</view>
						<view class="time flex-grow-0" style="font-size: 28rpx;">{{item.daysHour}}</view>
						<text class="flex-grow-1 break1" style="font-size: 28rpx;">抽中:{{item.prize_name}}</text>
					</view>
				</swiper-item>
			</swiper>
		</div>
		<view class="card-list flex-between" v-if="drawtypes==2">
			<view class="card-item" v-for="(v,k) in cardList" :key="v.id" @click="showCard(v)">
				<view class="card-img">
					<image :src="v.card_url?imgurl+v.card_url:imgurl+'/WeChat/pic12.png'" mode="" v-if="v.have"></image>
					<image class="suo" :src="imgurl+'/WeChat/suo.png'" mode="" v-else>
					</image>
					<view class="card-number">{{v.have}}</view>
				</view>
				<view class="card-name">
					{{v.card_name}}
				</view>
			</view>
		</view>

		<view class="rule_info">
			<view class="rule-title">
				抽奖规则说明
			</view>
			<view class="rele-cont">
				<bctos-rich-text :nodes="article"></bctos-rich-text>
				<!-- <u-parse :content="article"></u-parse> -->
				<!-- <rich-text :nodes="article | filtersRichText"></rich-text> -->
			</view>
		</view>
		<view style="height: 20rpx;"></view>

		<!-- 奖品弹窗 -->
		<uni-popup ref="prizepopup" background-color="none">
			<view class="popup-content prizepopup" @click="gotodrawds()">
				<view class="prizeimg">
					<image :src="(prizejson.image?prizejson.image:imgurl+'/WeChat/pic6.png')" mode="aspectFill"></image>
				</view>
				<view class="h1">
					{{(prizejson.is_ok==1?'获得':'很遗憾')+prizejson.name}}
				</view>
				<view class="ds">
					点击查看以往获得的奖品
				</view>
			</view>
		</uni-popup>
		<!-- 普通卡片详情 -->
		<uni-popup ref="cardds" background-color="none">
			<view class="popup-content cardpopup">
				<view class="card-img">
					<image :src="cardInfo.card_max_url?imgurl+cardInfo.card_max_url:imgurl+'/WeChat/pic12.png'" mode="aspectFill"></image>
				</view>
				<view class="h1">
					{{cardInfo.card_name}}
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		props: {
			drawtype: Number, //1 小奖  2 大奖
		},
		data() {
			return {
				// 背景图，可网络地址，可本地
				nImg: +this.serverURL + '/WeChat/luck.png',
				// 中奖的索引，也就是AwardList数组的索引，sjNum不能等于4，4是立即抽奖
				sjNum: 0,
				// false前端，true后端
				isQd: true,
				// 可自己后端获取，也可以前端
				AwardList: [
					// {
					// 	image: '/static/image/pic6.png',
					// 	name: '1.00个分红币'
					// }
				],
				imgurl: this.serverURL,
				cardList: [],
				isauthorized: (uni.getStorageSync('token') ? true : false),
				userinfo: {
					id: 0,
					username: '-',
					avatar: '',
					level: '',
					score: '',
					nowDayNum: 0,
					nowDayRice: '0',
					Company: 'm'
				},
				stepList: [],
				article: '',
				prize_num: 0,
				prizejson: {},
				isdrawing: true, //初始化抽奖机会,
				drawtypes:null,
				cardInfo:{},
				is_draw:false
			}
		},
		onLoad(e) {
		},
		onReady() {
			this.drawtypes=this.drawtype
			this.isauthorized = (uni.getStorageSync('token') ? true : false)
			if (uni.getStorageSync('token')) {
				this.userinfo = uni.getStorageSync('token');
			}
			this.getDrawDate()
		},
		methods: {
			isDraw(){
				this.is_draw = true;
				console.log(this.is_draw);
			},
			noDraw(){
				this.is_draw = false;
				console.log(this.is_draw);
			},
			// 切换抽奖类型
			savedrawtype(i){
				if(this.is_draw){
					uni.showToast({
						title:'正在抽奖中...',
						icon:'none'
					})
					return;
				}
				this.drawtypes=i
				this.getDrawDate()
			},
			getDrawDate() {
				let that = this;
				uni.request({
					url: that.serverURL + "/index/Draw/getPrizeList",
					method: "POST",
					data: {
						id: that.userinfo['id'],
						drawtype: that.drawtypes
					},
					success(res) {
						that.cardList = res.data.card;
						that.AwardList = res.data.prizeList;
						that.stepList = res.data.stepList;
						that.article = res.data.article;
						that.prize_num = res.data.prize_num;
						// that.prizejson = res.data.prizeid;
						// that.sjNum = res.data.prizeid.prize_num;
						that.isdrawing = (that.prize_num > 0 ? true : false)
					},
					fail(fail) {
						uni.hideLoading();
					}
				});
			},
			// 中奖后的逻辑
			updateMoney(sjNum) {
				if (this.AwardList[sjNum].name !== '未中奖') {
					this.prizejson = {
						is_ok: 1,
						name: this.AwardList[sjNum].name,
						image: this.AwardList[sjNum].image,
					}
				} else {
					this.prizejson = {
						is_ok: 0,
						name: this.AwardList[sjNum].name,
						image: this.AwardList[sjNum].image,
					}
				}
				//this.prize_num--;
				this.getDrawDate();
				this.$refs.prizepopup.open('center')
				// let that = this;
				// uni.request({
				// 	url: that.serverURL + "/index/Draw/saveUserPrize",
				// 	method: "POST",
				// 	data: {
				// 		id: that.userinfo['id'],
				// 		prizeid: that.AwardList[sjNum].id
				// 	},
				// 	success(res) {
				// 		that.getDrawDate()
				// 		that.$refs.prizepopup.open('center')
				// 	},
				// 	fail(fail) {
				// 		uni.hideLoading();
				// 	}
				// });
			},
			// 查看奖品列表
			gotodrawds() {
				uni.navigateTo({
					url: '/pages/my-prize/my-prize'
				})
			},
			//显示卡片
			showCard(v) {
				if(v.have>0){
					this.cardInfo = v;
					this.$refs.cardds.open('center')
				}else{
					uni.showToast({
						title:'未获得该卡片',
						icon:'none'
					})
				}
			},
		}
	}
</script>

<style lang="less" scoped>
	.home-bj {
		width: 100%;
		position: absolute;
		z-index: -1;
	}

	.xydzp {
		width: 349rpx;
		height: 71rpx;
		margin: 0px auto;
		padding-top: 10rpx;

	}

	.draw-number {
		background: #00412d;
		width: 244rpx;
		height: 49rpx;
		border-radius: 49rpx;
		margin: 0px auto;
		margin-top: 19rpx;
		margin-bottom: 58rpx;
		text-align: center;
		line-height: 49rpx;
		color: #fff;
	}

	.winning-box {
		background: #00412d;
		width: 679rpx;
		height: 111rpx;
		margin: 58rpx auto 0px auto;
		border-radius: 20rpx;
		box-shadow: 0px 10rpx 24rpx 0px rgba(0, 0, 0, 0.1);
		color: #fff;

		.swiper {
			height: 100%;
		}

		.swiper-item {
			display: flex;
			font-size: 34rpx;
			font-weight: bold;
			align-items: center;
			padding: 0px 20rpx;
			height: 100%;
			text-align: right;

			.userimg {
				background: #f1f1ff;
				width: 81rpx;
				height: 81rpx;
				border: 4rpx solid #fff;
				box-sizing: border-box;
				margin-right: 30rpx;
				border-radius: 5rpx;
			}
		}

		.time {
			margin-right: 30rpx;
			margin-left: 30rpx;
		}
	}

	.rule_info {
		width: 679rpx;
		margin: 62rpx auto 62rpx auto;

		.rule-title {
			font-size: 38rpx;
			color: #333;
			font-weight: bold;
			margin-bottom: 40rpx;
		}
	}

	.rele-cont {
		width: 100%;
		min-height: 670rpx;
		background: #eeeeef;
		padding: 0px 20rpx;
		box-sizing: border-box;

		image {
			width: 100% !important;
		}
	}


	.card-list {
		background: #eff3f8;
		padding: 0px 20rpx;
		box-sizing: border-box;
		box-shadow: 0px 10rpx 24rpx 0px rgba(0, 0, 0, 0.1);
		margin: 40rpx auto 0px auto;
		width: 670rpx;
		box-sizing: border-box;
		display: flex;

		.swiper {
			height: 259rpx;
		}

		.card-item {
			padding: 20rpx 0px;
		}

		.card-img {
			width: 111rpx;
			height: 158rpx;
			background: #00412d;
			border-radius: 18rpx;
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			box-shadow: 0px 10rpx 24rpx 0px rgba(0, 0, 0, 0.1);

			.card-number {
				position: absolute;
				top: -15rpx;
				right: -15rpx;
				width: 32rpx;
				height: 32rpx;
				background-image: linear-gradient(to right, #047449, #00412d);
				text-align: center;
				line-height: 32rpx;
				font-size: 15rpx;
				font-weight: bold;
				border-radius: 50%;

			}

		}

		.card-name {
			text-align: center;
			margin-top: 17rpx;
			font-size: 24rpx;
			font-weight: bold;
		}

		.suo {
			width: 45rpx;
			height: 54rpx;
		}
	}


	// 弹窗
	.popup-content {
		flex-direction: column;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 486rpx;
		height: 618rpx;
		border-radius: 30rpx;
		overflow: hidden;
		background: #fff;

		.grade {
			width: 315rpx;
			height: 315rpx;
			border-radius: 50%;
			background-image: linear-gradient(to right, #047449, #00412d);
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;

			image {
				width: 107rpx;
				height: 108rpx;
				position: absolute;
				bottom: 0px;
				right: 10rpx;
			}

			.grade-number {
				font-size: 74rpx;
				font-weight: bold;
			}
		}

		.h1 {
			margin-top: 62rpx;
			font-size: 45rpx;
			font-weight: bold;
		}

		.ds {
			font-size: 28rpx;
			margin-top: 10rpx;
		}

		.card-img {
			width: 300rpx;
			height: 422rpx;
			overflow: hidden;
		}
	}

	.prizeimg {
		width: 315rpx;
		height: 315rpx;
	}

	.xydzp {
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		width: 100%;
	}

	.xydzp-btn {
		color: #000;
		font-size: 36rpx;
		font-weight: bold;
	}

	.xydzpon {
		color: #fff;
	}
</style>
